<template>
    <div>
        <!-- visible.sync  v-model  自定义组件上能够使用v-model -->
        <el-dialog :title="form.uid ? '分类编辑' : '分类添加'" :visible.sync="buffer.formBuffer">
            <el-form :model="form">
                {{ form }}
                <!-- 顶级分类id==>pid -->
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择">
                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in cateList" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 分类名称 -->
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.catename" autocomplete="off"></el-input>
                </el-form-item>

                <!-- 分类图片 -->
                <el-form-item label="分类图片" :label-width="formLabelWidth">
                    <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false"
                        :on-change="imgChange">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <!-- 分类状态 -->
                <el-form-item label="分类状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="buffer.formBuffer = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['buffer', 'cateList'],
    data() {
        return {
            form: {
                pid: 0,  //父级分类数据id
                catename: '',//分类名称
                img: '',//分类图片（二进制数据）
                status: 1//1 启用  2禁用
            },
            imageUrl: "",//预览图片路径
            formLabelWidth: '120px'
        };
    },
    watch: {
        buffer: {
            handler(newV, oldV) {
                if (newV.formBuffer == false) {
                    this.form = {
                        pid: 0,  //父级分类数据id
                        catename: '',//分类名称
                        img: '',//分类图片（二进制数据）
                        status: 1//1 启用  2禁用
                    }
                }
            },
            deep: true,//使用深度监听
        }
    },
    mounted() {
        // 监听list组件传值 进行修改数据回填
        this.$BUS.$on('edit', (info) => {
            // 解构获取修改数据
            let { row } = info
            console.log(row)
            // 删除不需要回填的修改数据
            delete (row.id)
            delete (row.rolename)
            delete (row.randstr)
            row.password = ""
            // 赋值回填数据
            this.form = JSON.parse(JSON.stringify(row))
            // 弹起表单
            this.buffer.formBuffer = true
        })
    },
    methods: {
        submit() {
            // let a = 12;注意次三元上方语句结尾一定加 ';'
            (this.form.id ? this.$api.reqEditCate(this.form) : this.$api.reqAddcate(this.form))
                .then(res => {
                    console.log(res)
                    // 3.1关闭弹窗
                    this.buffer.formBuffer = false
                    // 3.2提示用户操作成功
                    this.$message({ type: "success", message: "操作成功！" })
                    // 3.3赋空表单数据(使用了watch)
                    // 3.4更新数据列表
                    this.$emit('channel', '更新数据吧！')
                })
                .catch(err => console.log(err))
        },
        // 监听本地图片选择变化
        imgChange(file) {
            // 1.解构获取图片基本信息
            let { name, size } = file
            // 2.检测大小 2M == 1024*1024*2
            if (size > 1024 * 1024 * 2) {
                this.$message({
                    message: '大小超过2M！',
                    type: 'warning'
                });
            }
            // 3.检测文件类型是否合法 02.png
            let allowSuffix = ['jpeg', 'jpg', 'png', 'gif']
            if (!allowSuffix.includes(name.split('.').pop())) {
                this.$message({
                    message: '非法文件！',
                    type: 'warning'
                });
            }

            // 4.将预览的图片回显在页面上 
            // URL.createObjectURL可以将二进制（Blob）数据转换成能够你在本地访问的url字符串的地址
            this.imageUrl = URL.createObjectURL(file.raw)

            // 5.赋值二进制图片数据
            this.form.img = file.raw
        }
    },
};
</script>

<style scoped lang="less">
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
